<?php 
header("content-type:text/html;charset=utf8");
$pdo = new PDO("mysql:host=127.0.0.1;dbname=statistics","root","zqVnUy6cxsQXbpEZ");
$pdo->exec("set names utf8");
$p = isset($_GET['p'])?$_GET['p']:1;
$size = 10;
$limit = ($p-1)*$size;
if (isset($_GET['start']) && $_GET['start']) {
    $start = strtotime($_GET['start']);
}
if (isset($_GET['end']) && $_GET['end']) {
    $end = strtotime($_GET['end']);
}
$application_sql = "SELECT * FROM statistics_application_day_active WHERE 1 = 1";
if (isset($start)) {
    $application_sql .= " AND time >= '$start'";
}
if (isset($end)) {
    $application_sql .= " AND time <= '$end'";
}
//总数据量
$count_sql = $application_sql." GROUP BY application_name";
$count_data = $pdo->query($count_sql)->fetchAll(PDO::FETCH_ASSOC);
//总页数
$count_p = ceil(count($count_data)/$size);
//获取当前页的数据
$application_sql .= " GROUP BY application_name LIMIT $limit,$size";
$data = $pdo->query($application_sql)->fetchAll(PDO::FETCH_ASSOC);
$arr = array();
foreach ($data as $key => $value) {
    $sql = "SELECT * FROM statistics_application_day_active WHERE application_name = '".$value['application_name']."'";
    if (isset($start)) {
        $sql .= " AND time >= '$start'";
    }
    if (isset($end)) {
        $sql .= " AND time <= '$end'";
    }
    $arr[$value['application_name']][] = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
}
if (isset($start)) {
    $start = date("Y-m-d",$start);
}
if (isset($end)) {
    $end = date("Y-m-d",$end);
}
$array = array();
foreach ($arr as $key => $value) {
    foreach ($value as $ke => $val) {
        foreach ($val as $k => $v) {
           $array[$v['application_name']][date('m-d',$v['time'])] = $v['number'];
         }
    }
}
$i = 1;
 ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumino - Dashboard</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href=""><span>数据统计</span>嗨镜</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 退出登陆</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div><!-- /.container-fluid -->
	</nav>
		
	<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
		<ul class="nav menu">
			<li><a href="index.php"><span class="glyphicon glyphicon-dashboard"></span> 设备日活统计</a></li>
            <li class="active"><a href="application_index.php"><span class="glyphicon glyphicon-dashboard"></span> 应用日活统计</a></li>
            <li><a href="device_use_duration.php"><span class="glyphicon glyphicon-th"></span> 设备使用时长统计</a></li>
            <li><a href="application_use_duration.php"><span class="glyphicon glyphicon-th"></span> 应用使用时长统计</a></li>
            <li><a href="device_info.php"><span class="glyphicon glyphicon-stats"></span> 设备信息统计</a></li>
            <li><a href="user_info.php"><span class="glyphicon glyphicon-list-alt"></span> 用户信息统计</a></li>
            <li><a href="application_info.php"><span class="glyphicon glyphicon-pencil"></span> 应用信息统计</a></li>
            <li><a href="device_time_interval.php"><span class="glyphicon glyphicon-info-sign"></span> 设备日均时段统计</a></li>
            <li><a href="application_time_interval.php"><span class="glyphicon glyphicon-info-sign"></span> 应用日均时段统计</a></li>
		</ul>
		<div class="attribution">More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></div>
	</div><!--/.sidebar-->
		
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		 <form action="./application_index.php">
            <div class="form-group" border="1">
                <b>开始日期：</b><input name="start" id="start" value="<?php echo isset($start)?$start:'' ?>" type="text" style="width:120px;margin-top:30px;border:2;border-color:green;" placeholder="开始日期">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>结束日期：</b><input name="end" id="end" value="<?php echo isset($end)?$end:'' ?>" type="text" style="width:120px;margin-top:30px;border:2;border-color:green;" placeholder="结束日期">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" style="width:120px;border:2;border-color:yellow;background-color:yellow;" value="搜索">
            </div>
        </form>         
            <div id="line1" style="width:100%;height:300px;"></div>
            <div id="line2" style="width:100%;height:300px;"></div>
            <div id="line3" style="width:100%;height:300px;"></div>
            <div id="line4" style="width:100%;height:300px;"></div>
            <div id="line5" style="width:100%;height:300px;"></div>
            <div id="line6" style="width:100%;height:300px;"></div>
            <div id="line7" style="width:100%;height:300px;"></div>
            <div id="line8" style="width:100%;height:300px;"></div>
            <div id="line9" style="width:100%;height:300px;"></div>
            <div id="line10" style="width:100%;height:300px;"></div>
        <center>
          <b>当前页码数 <span id="p" style="color: red"><?php echo $p; ?></span></b>
          <button id="first">首页</button>
          <button id="upper">上一页</button>
          <button id="lower">下一页</button>
          <button id="tail">尾页</button>
          <b>当前总页数 <span id="pcount" style="color:red"><?php echo $count_p ?></span></b>
        </center>
	</div>	<!--/.main-->

	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/chart.min.js"></script>
	<script src="js/chart-data.js"></script>
	<script src="js/easypiechart.js"></script>
	<script src="js/easypiechart-data.js"></script>
	<script type="text/javascript" src="./js/echarts.min.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/theme/grid.js"></script>
	<script>
 <?php foreach ($array as $key => & $value) {
        $time = array();
        $number = array();
        foreach ($value as $k => $val) {
            $time[] = $k;
            $number[] = $val;
        }
        $time = json_encode($time);
        $number = json_encode($number);
        $key = json_encode($key);
         ?>
    $(document).ready(function(){
        var time = <?php echo $time ?>;
        var number = <?php echo $number ?>;
        var key = <?php echo $key ?>;
        var i = <?php echo $i ?>;
        var line = echarts.init(document.getElementById('line'+i));
        line.setOption({
            color:["#32d2c9"],
            title: {
                x: 'left',
                text: key,
                textStyle: {
                    fontSize: '18',
                    color: '#4c4c4c',
                    fontWeight: 'bolder'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: time,
                axisLabel: {
                    interval:0
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'人数',
                    type:'line',
                    data:number,
                    markLine: {data: [{type: 'average', name: '平均值'}]}
                }
            ]
        }) ;
    })
    <?php $i+=1; } ?>

     $("#first").click(function() {
        var end = $("#end").val();
        var start = $("#start").val();
        window.location.href='./application_index.php?start='+start+'&end='+end;
    })

     $("#upper").click(function() {
        var p = parseInt($("#p").html())-parseInt(1);
        if (p < "1") {
            alert("当前属于第一页");
            return false;
        }
        var end = $("#end").val();
        var start = $("#start").val();
        window.location.href='./application_index.php?start='+start+'&end='+end+'&p='+p;
    })

    $("#lower").click(function() {
        var p = parseInt($("#p").html())+parseInt(1);
        var pcount = parseInt($("#pcount").html());
        if (p > pcount) {
            alert("当前属于尾页");
            return false;
        }
        var end = $("#end").val();
        var start = $("#start").val();
        window.location.href='./application_index.php?start='+start+'&end='+end+'&p='+p;
    })

     $("#tail").click(function() {
        var p = $("#pcount").html();
        var end = $("#end").val();
        var start = $("#start").val();
        window.location.href='./application_index.php?start='+start+'&end='+end+'&p='+p;
    })

	</script>	
</body>

</html>
